<template>
	<div class="demo">
		<el-row :gutter="20">
			<el-col :span="6">
				<div class="grid-content bg-purple">
					<h2>
						新品首发
						<el-button class="qiant" size="mini" icon="el-icon-arrow-right" circle></el-button>
					</h2>
					<!-- 轮播图 -->
					<el-carousel :interval="4000" type="card" height="200px">
						<el-carousel-item :key="item">

							<p>

								<el-link href="https://element.eleme.io" target="_blank" style="font-size: 14px;" :underline="false">Oppo 手机
									128G内存 </el-link><br />
								<small class="xingp">来这里发现更多新品</small><br />
								<span class="price">￥3300起</span>
							</p>


						</el-carousel-item>
						<el-carousel-item :key="item">

							<p>

								<el-link href="https://element.eleme.io" target="_blank" style="font-size: 14px;" :underline="false">博朗(Braun)男士剃须刀</el-link><br />
								<small class="xingp">来这里发现更多新品</small><br />
								<span class="price">￥160起</span>

							</p>


						</el-carousel-item>
						<el-carousel-item :key="item">

							<p>

								<el-link href="https://element.eleme.io" target="_blank" style="font-size: 14px;" :underline="false">李佳琦推荐过的美容仪</el-link><br />
								<small class="xingp">来这里发现更多新品</small><br />
								<span class="price">￥2300起</span>
							</p>


						</el-carousel-item>
					</el-carousel>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">
					<h2>
						排行榜
						<el-button class="qiant" size="mini" icon="el-icon-arrow-right" circle></el-button>
					</h2>
					<el-dropdown style="margin-left: 20px;padding-left:  10px;">
						<el-button size="mini" round>个人健康
							<i class="el-icon--right"></i>
						</el-button>
						<img class="img4" src="../assets/4.png" />
						<el-dropdown-menu slot="dropdown">

							<!-- <el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item disabled>双皮奶</el-dropdown-item>
							<el-dropdown-item divided>蚵仔煎</el-dropdown-item> -->
						</el-dropdown-menu>
					</el-dropdown>
					&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
					<el-dropdown>
						<el-button size="mini" round>面部护肤
							<i class="el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item disabled>双皮奶</el-dropdown-item>
							<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
					<el-dropdown>
						<el-button size="mini" round>女装
							<i class="el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>黄金糕</el-dropdown-item>
							<el-dropdown-item>狮子头</el-dropdown-item>
							<el-dropdown-item>螺蛳粉</el-dropdown-item>
							<el-dropdown-item disabled>双皮奶</el-dropdown-item>
							<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">
					<h2>
						逛好店
						<el-button class="qiant" size="mini" icon="el-icon-arrow-right" circle></el-button>

					</h2>
					<div class="one3">
						<div class="one1">
							<div class="one5">
							<el-link :underline="false" style="font-weight: 300;">New Balance官<br />方旗舰店</el-link><br />
							<el-tag style="height: 27px;width: 80px;">随心所动</el-tag>
							<br />
							<br />
							<el-link type="info" style="font-size: 12.5px;">319.9万人关注</el-link>
							
							</div>
							<img src="../assets/5.png" class="one4" />
						</div>
						<div class="one2">
							<div class="one5">
							<el-link :underline="false" style="font-weight: 300;color: #2C3E50;">伊利冰淇淋自营旗舰店</el-link><br />
							<el-tag style="height: 27px;width: 80px;" type="danger">京东自营</el-tag>
							<br />
							<br />
							<el-link type="info" style="font-size: 12.5px;">68.7万人关注</el-link>
							
							</div>
							<img src="../assets/7.png" class="one4" />
						</div>
					</div>
				</div>
			</el-col>

			<el-col :span="6">
				<div class="grid-content bg-purple">
					<h2>
						领券中心
						<el-button size="mini" class="qiant" icon="el-icon-arrow-right" circle></el-button>
					</h2>
					<img src="../assets/6.png" style="height:245px;width:300px;cursor:pointer;" />
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: "Demo",
		methods: {
			handleClick() {
				alert("button click");
			},
		},
	};
</script>
<style scoped>
	.one5{
		height: 100px;
		width: 100px;

		position: relative;
		left: 20px;
		top: 7px;
	}
	.one4{
		height: 90px;
		width: 90px;
		/* margin-top: -92px;
		margin-left: 70px; */
		position: relative;
		left: 150px;
		top: -88px;
	}
	.one1 {
		height: 115px;
		width: 275px;
		background-color: #F4F1EF;
		margin-left: 12px;
		margin-bottom: 5px;
        
	}
.one2{
	background-color: #F8F3F6;
	height: 115px;
	width: 275px;
	margin-left: 12px;
	margin-bottom: 5px;
}
	.img4 {
		height: 200px;
		width: 43px;
		position: absolute;
		left: 2px;
		top: 40px;
	}

	.xingp {
		position: absolute;
		left: 27px;
		top: 27px;
	}

	.price {
		color: red;
		color: 19px;
		position: absolute;
		left: 40px;
		top: 45px;

	}

	small {
		font-size: 11px;
		font-weight: 300;
		color: gray;
		text-align: center;

	}

	p {
		position: absolute;
		top: 120px;
	}



	.el-carousel__item:nth-child(2n) {
		background-image: url(../assets/1.png);
		background-size: 120px 120px;
		background-repeat: no-repeat;


	}

	.el-carousel__item:nth-child(2n+ 1) {
		background-image: url(../assets/3.png);
		background-size: 120px 120px;
		background-repeat: no-repeat;



	}

	.el-carousel__item:nth-child(3) {
		background-image: url(../assets/2.png);
		background-size: 120px 120px;
		background-repeat: no-repeat;



	}

	.qiant {
		margin-left: 30px;

	}

	.demo {
		background: #f4f4f4;
		height: 340px;
		width: 1260px;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple {
		background: white;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
		height: 300px;
		width: 300px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
